<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜-原生js封装</title>
	<link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/>
	<link rel="icon" href="../public/image/favicon.png" type="images/png"/>
	<link rel="stylesheet" type="text/css" href="../public/style/cssreset-min.css">
	<link rel="stylesheet" type="text/css" href="../public/style/common.css">
	<style type="text/css">
		.magnifier-box{
			margin-bottom: 15px;
		}
		.magnifier-container{
			width: 400px;
			height: 255px;
			margin: 50px;
			position: relative;
    		border: 1px solid #ccc;
		}
		.magnifier-small{
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.magnifier-small img{
			/*max-width: 100%;
			max-height: 100%;*/
		}
		.magnifier-mark {
		    position: absolute;
		    display: block;
		    width: 400px;
		    height: 255px;
		    background-color: #fff;
		    filter: alpha(opacity:0);
		    opacity: 0;
		    z-index: 10;
		}
		.magnifier-float-box {
		    display: none;
		    width: 160px;
		    height: 120px;
		    position: absolute;
		    background: #ffffcc;
		    border: 1px solid #ccc;
		    filter: alpha(opacity:50);
		    opacity: 0.5;
		}
		.magnifier-big-box {
		    display: none;
		    position: absolute;
		    top: 0;
		    left: 460px;
		    width: 400px;
		    height: 300px;
		    overflow: hidden;
		    border: 1px solid #ccc;
		    z-index: 1;
		}

		.magnifier-big-box img {
		    position: absolute;
		    z-index: 5;
		}
		.magnifier-thumb{}
		.magnifier-thumb li{
			display: inline-block;
			width: 50px;
			height: 50px;
			vertical-align: middle;
			line-height: 50px;
			margin-right: 5px;
			border: 2px solid #fff;
			/*display: table-cell;*/
		}
		.magnifier-thumb li.active{
			border-color: #f40;
		}
		.magnifier-thumb li img{
			max-width: 50px;
			max-height: 50px;
			vertical-align: middle;
		}
	</style>
	<script type="text/javascript" src="../code/magnifier.js"></script>
</head>
<body>
	<div class="header">
        <a href="https://github.com/huanghanzhilian/widget" target="_blank">项目地址</a>
        <a href="/">返回首页</a>
    </div>
    <div class="main">
		<div class="magnifier-box" id="magnifier1">
    		<div class="magnifier-container"></div>
			<ul class="magnifier-thumb">
				<li class="active">
					<img src="img/c2.jpg" data-source="img/c2a.jpg">
				</li>
				<li>
					<img src="img/macbook-small.jpg" data-source="img/macbook-big.jpg">
				</li>
			</ul>
    	</div>
		<script type="text/javascript">
			new magnifier("#magnifier1");
		</script>
		<div class="code">
			<p>
				不传参数，执行默认参数，鼠标经过预览图切换
			</p>
			<p>new magnifier("#magnifier1");</p><br/>
			<p>
				event:"click"，点击预览图切换图片，默认"mouseover" 执行默认参数
			</p>
			<p>new magnifier("#magnifier1",{
				event:"click"
			});</p>
		</div>

		<div class="example">

			<div class="call">
				<h1>调用方法：</h1>
				<p>new magnifier(selector,{options});</p>
			</div>


			<h2>options参数</h2>
			<table>
				<thead>
					<tr>
						<th width="150">参数</th>
						<th width="100">默认值</th>
						<th>说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>event</td>
						<td>"mouseover"</td>
						<td>可设置鼠标点击"click"</td>
					</tr>
				</tbody>
			</table>
		</div>
    </div>
</body>
</html>